<template>
<el-card style="height: 100%;">

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="编号前缀:">
      <el-input v-model="formInline.Erprefix" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="目标表单:">
      <el-select
        v-model="formInline.Formtypeid"
        placeholder="请选择"
        clearable
      >
        <el-option v-for="i in formname" :label="i.formtypeid" :value="i.formtypeid" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>


 <el-table :data="tableData" border stripe style="width: 100%;margin-top: 15px;height: 730px; ">
    <el-table-column type="index" label="序号" width="100" />
    <el-table-column prop="formtypeid" label="目标表单" />
    <el-table-column prop="erprefix" label="编号前缀" />
    <el-table-column prop="ertimerule" label="时间规则" >
      <template v-slot="timerule">
        <span v-if="timerule.row.ertimerule==0"></span>
        <span v-else-if="timerule.row.ertimerule==1">年月日</span>
        <span v-else-if="timerule.row.ertimerule==2">年月日时分秒</span>
        <span v-else-if="timerule.row.ertimerule==3">时分秒</span>
      </template>
    </el-table-column>
    <el-table-column prop="ernum" label="流水号/位" />
    <el-table-column prop="erid" label="编号生成规则" />
    <el-table-column prop="userName" label="操作人" />
    <el-table-column prop="lastModificationTime" label="操作时间" >
      <template v-slot="time">
        <span>{{ moment(time.row.lastModificationTime).format("YYYY年MM月DD日HH:mm:ss") }}</span>
      </template>
    </el-table-column>
    <el-table-column  label="操作" >
      <template v-slot="cz">
        <el-button link type="success" @click="updatecode(cz.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

 <el-pagination
      style="margin-top: 15px;float: right;"
      v-model:current-page="pagedata.index"
      v-model:page-size="pagedata.size"
      :page-sizes="[10, 20, 30]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagedata.totalcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />


 <el-dialog v-model="dialogFormVisible" title="编辑" width="500">


  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="目标表单" >
      <el-input disabled v-model="ruleForm.formtypeid" />
    </el-form-item>
    <el-form-item label="编号前缀" >
      <el-input v-model="ruleForm.erprefix" />
    </el-form-item>
    <el-form-item label="时间规则" prop="ertimerule">
      <el-select v-model="ruleForm.ertimerule" placeholder="请选择">
        <el-option label="无" :value="0" />
        <el-option label="年月日" :value="1" />
        <el-option label="年月日时分秒" :value="2" />
        <el-option label="时分秒" :value="3" />
      </el-select>
    </el-form-item>
    <el-form-item label="流水号/位" prop="ernum">
      <el-input v-model="ruleForm.ernum" />
    </el-form-item>
    <el-form-item label="重置规则" prop="ertype">
      <el-select v-model="ruleForm.ertype" placeholder="请选择">
        <el-option label="每日" :value="0" />
        <el-option label="每月" :value="1" />
        <el-option label="每年" :value="2" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button style="margin-left: 40%;" type="primary" @click="submitForm(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>

    
  </el-dialog>
</el-card>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { onMounted, reactive, watch } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'

interface FormType {
  formtypeid: string;
  [key: string]: any;
}

const tableData =ref([])
const formname=ref<FormType[]>([])
const pagedata=ref({
  index:1,
  size:10,
  totalpage:1,
  totalcount:1
})

onMounted(()=>{
getlist();
axios.get("api/app/dm_Encoderule?pageIndex="+pagedata.value.index+"&pageSize="+pagedata.value.size).then(res=>{
  formname.value=res.data.pageData;
})
})

const formInline = reactive({
  Erprefix: '',
  Formtypeid: ''
})

watch(pagedata.value,()=>{getlist()},{deep:true})

const getlist=()=>{
axios.get("api/app/dm_Encoderule?pageIndex="+pagedata.value.index+"&pageSize="+pagedata.value.size+"&Erprefix="+formInline.Erprefix+"&Formtypeid="+formInline.Formtypeid).then(res=>{
  tableData.value=res.data.pageData;
  pagedata.value.totalcount=res.data.totalCount
  pagedata.value.totalpage=res.data.totalPages
})
}


const onSubmit = () => {
  getlist();
}

const dialogFormVisible = ref(false)


const a=useCounterStore()
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
  "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
  "creationTime": "2025-07-24T07:47:19.066Z",
  "creatorId": a.userid,
  "lastModificationTime": "2025-07-24T07:47:19.066Z",
  "lastModifierId": a.userid,
  "erid": "string",
  "ername": "string",
  "erprefix": "string",
  "ertimerule": 0,
  "ernum": 0,
  "ertype": 0,
  "formtypeid": "string"
})


const rules = reactive<FormRules>({
  ertimerule: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
    ernum: [
    { required: true, message: '请输入', trigger: 'blur' },
    {pattern: /^[1-9]\d*$/, 
          message: '请输入正整数', 
          trigger: 'blur' }
  ],
    ertype: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
})

const updatecode=(data:any)=>{
ruleForm.value=data;
dialogFormVisible.value=true;
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.value.creatorId=a.userid;
      ruleForm.value.lastModifierId=a.userid;
      axios.put("api/app/dm_Encoderule",ruleForm.value).then(res=>{
          if(res.data.code==200){
            ElMessage.success(res.data.message)
            dialogFormVisible.value=false;
            getlist()
          }
          else{
            ElMessage.error(res.data.message)
            dialogFormVisible.value=false;
            getlist()
          }
      })




    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  dialogFormVisible.value=false
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))


import { ref } from 'vue'

import type { ComponentSize } from 'element-plus'
import { useCounterStore } from '@/stores/counter';


const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}


</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>